<template>
	<view class="com">
		<scroll-view class="scroll" @click="changeBig" scroll-y="true">
			<view
				v-for="v in big"
				:key="v"
				:class="current.big == v ? 'active' : ''"
				:data-key="v"
			>
				{{ v }}
			</view>
		</scroll-view>
		<scroll-view class="scroll" scroll-y="true">
			<view
			 @click="changeDepartment(v,$event)"
				v-for="v in departments"
				:data-key="v.departmentId"
				:key="v.departmentId"
				class="right"
			>
				{{ v.departmentName }}
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { getPart, getBig, getDepartments } from '@/api/AppointmentRegisterAPI.js'
import { selPersonStore } from '@/store/appReStore.js'
import { onBeforeMount, ref } from 'vue'
const part = ref([])
const big = ref([])
const departments = ref([])
const dataDep = selPersonStore();
const current = ref({
	big: '',
	departments: -1
})
const props = defineProps(['partId'])

const changeBig = async e => {
	let key = e.target.dataset.key
	if (key && key != current.value.big) { 
		current.value.big = key
		let { data } = await getDepartments(props.partId, key)
		departments.value = data.data
	}
}
const changeDepartment = (v,event)=> {
	let key = event.target.dataset.key
	if (key) {
		current.value.departments = key
		const selRoom = selPersonStore()
		selRoom.selRoomData = v
		uni.navigateTo({
			url: `/pages/appointmentRegister/gastrologyDepartment/gastrologyDepartment`
		});
	}
}
onBeforeMount(() => {
	//挂载前渲染默认的数据  默认数据是第一个院区 第一个大科室
	getBig()
		.then(({ data }) => {
			if (data.code == 0) {
				big.value = data.data
				current.value.big = big.value[0]
				return getDepartments(props.partId, big.value[0])
			}
		})
		.then(({ data }) => {
			if (data.code == 0) {
				departments.value = data.data
				
			}
		})
})
</script>
<style lang="less" scoped>
.com {
	margin-top: 30rpx;
	display: flex;
	.scroll {
		width: 280rpx;
		height: 1084rpx;
		color: #333;
		background: #f6f7f7;
		&:last-child {
			width: 470rpx;
			background: #fff;
		}
		view {
			height: 96rpx;
			line-height: 96rpx;
			text-indent: 32rpx;
		}
		.active {
			background: #fff;
		}
		.right {
			border-bottom: 1px solid #f2f2f2;
			box-sizing: border-box;
			&:last-child {
				border: none;
			}
		}
	}
}
</style>
